<template>
  <el-scrollbar @scroll="handleScroll" ref="scrollFun">
    <div style="min-height: 800px">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
        <el-tab-pane label="普通批计划" name="first">
          <div
            style="
              position: fixed;
              top: 130px;
              width: 100%;
              background-color: white;
              height: 70px;
              z-index: 9;
            "
          ></div>
          <div class="select-box row" style="z-index: 9">
            <el-select
              no-data-text="暂无数据"
              v-model="planReqData.name"
              size="large"
              placeholder=" "
              @change="provinceChange(1)"
              style="width: 95px"
            >
              <el-option
                v-for="item in provinceArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-select
              no-data-text="暂无数据"
              v-model="planReqData.year"
              size="large"
              placeholder=" "
              @change="yearChange"
              style="width: 95px; margin-left: 10px"
            >
              <el-option
                v-for="item in planYearArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-select
              no-data-text="暂无数据"
              v-model="planReqData.course"
              size="large"
              placeholder=" "
              @change="fetchSchoolPlan"
              style="width: 95px; margin-left: 10px"
            >
              <el-option
                v-for="item in courseArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-select
              no-data-text="暂无数据"
              v-model="planReqData.batch"
              size="large"
              placeholder=" "
              @change="fetchSchoolPlan"
              style="width: 95px; margin-left: 10px"
            >
              <el-option
                v-for="item in batchArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>

            <el-input
              v-model="planReqData.keywords"
              placeholder="请输入院校名称"
              clearable
              @keydown.enter="fetchSchoolPlan"
              @clear="fetchSchoolPlan"
              style="width: 160px; height: 40px; margin: 0 10px"
            >
            </el-input>

            <el-input
              v-model="planReqData.keywordsMajor"
              placeholder="请输入专业内容"
              clearable
              @keydown.enter="fetchSchoolPlan"
              @clear="fetchSchoolPlan"
              style="width: 160px; height: 40px"
            >
            </el-input>
          </div>

          <div
            class="row plan-title plan-list"
            :style="{
              width: contentWidth != 0 ? contentWidth : planTitleWidth,
            }"
          >
            <div style="width: 10.67%; padding: 0 12px">院校代码</div>
            <div style="width: 31.67%; padding: 0 12px">院校名称</div>
            <div style="width: 10.67%; padding: 0 12px">批次/段</div>
            <div style="width: 15.67%; padding: 0 12px">科类</div>
            <div style="width: 9.67%; padding: 0 12px">计划人数</div>
            <div style="width: 13.67%; padding: 0 12px">操作</div>
          </div>

          <div
            ref="contentRef"
            v-if="tableData.length > 0"
            style="margin-top: 120px"
          >
            <div v-for="(item, index) in tableData" :key="index">
              <div class="row plan-list">
                <div style="width: 10.67%; padding: 0 12px">
                  {{ item.code }}
                </div>
                <div
                  class="curr"
                  style="width: 31.67%; padding: 0 12px; color: #004cf7"
                  @click="onClickCollegeDetails(item)"
                >
                  {{ item.collegeNameText }}
                </div>
                <div style="width: 10.67%; padding: 0 12px">
                  {{ item.batch }}
                </div>
                <div style="width: 15.67%; padding: 0 12px">
                  {{ item.course || '-' }}
                </div>
                <div style="width: 9.67%; padding: 0 12px">
                  {{ item.planNum }}
                </div>
                <div
                  class="row curr"
                  style="width: 13.67%; padding: 0 12px; color: #004cf7"
                  @click="showMajorsID = showMajorsID == item.id ? '' : item.id"
                >
                  <div>{{ item.majors.length + '个专业' }}</div>
                  &nbsp;
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>

              <div v-if="showMajorsID == item.id">
                <div class="row plan-major-title">
                  <div style="width: 10.67%; padding: 0 12px">专业代码</div>
                  <div style="width: 44.67%; padding: 0 12px">专业名称</div>
                  <div style="width: 14.67%; padding: 0 12px">选考要求</div>
                  <div style="width: 9.67%; padding: 0 12px">计划人数</div>
                  <div style="width: 9.67%; padding: 0 12px">学制</div>
                  <div style="width: 9.67%; padding: 0 12px">学费</div>
                </div>

                <div
                  class="row plan-major-list"
                  v-for="(major, index) in item.majors"
                  :key="index"
                >
                  <div style="width: 10.67%; padding: 0 12px">
                    {{ major.code }}
                  </div>
                  <div style="width: 44.67%; padding: 0 12px">
                    {{ major.name }}{{ major.remark }}
                  </div>
                  <div style="width: 14.67%; padding: 0 12px">
                    {{ major.chooseSubjectText || '-' }}
                  </div>
                  <div style="width: 9.67%; padding: 0 12px">
                    {{ major.planNum || '-' }}
                  </div>
                  <div style="width: 9.67%; padding: 0 12px">
                    {{ major.learnYear }}
                  </div>
                  <div style="width: 9.67%; padding: 0 12px">
                    {{ major.cost }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right" style="margin-top: 20px">
              <el-config-provider :locale="zhCn">
                <el-pagination
                  v-model:current-page="planReqData.page"
                  v-model:page-size="planReqData.pageSize"
                  :page-sizes="[10, 20, 30]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="planReqData.total"
                  @size-change="fetchSchoolPlan"
                  @current-change="fetchSchoolPlan"
                />
              </el-config-provider>
            </div>
          </div>

          <div v-else class="nodata">暂无数据</div>
        </el-tab-pane>

        <el-tab-pane label="提前批计划" name="second">
          <div
            style="
              width: 100%;
              height: 70px;
              background-color: white;
              position: fixed;
              top: 130px;
              z-index: 9999;
            "
          />

          <div class="select-box" style="z-index: 9999; display: flex">
            <div>
              <el-select
                no-data-text="暂无数据"
                v-model="tqPlanReqData.name"
                size="large"
                placeholder=" "
                @change="provinceChange(2)"
                style="width: 95px"
              >
                <el-option
                  v-for="item in provinceArr"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </div>

            <el-select
              no-data-text="暂无数据"
              v-model="tqPlanReqData.year"
              size="large"
              placeholder=" "
              @change="yearChange"
              style="width: 95px; margin: 0 10px"
            >
              <el-option
                v-for="item in tqPlanYearArr"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <div style="position: relative">
              <el-input
                v-model="tqPlanKeywords"
                placeholder="请输入院校/专业名称"
                clearable
                @focus="isShowSearchPop = true"
                @blur="isShowSearchPop = false"
                @input="getPreBatchPlanSearchSchool"
                style="width: 400px; height: 40px; margin: 0 10px"
              >
                <template #append>
                  <el-button
                    type="primary"
                    style="height: 42px"
                    @click="getPreBatchPlanSearchSchool"
                    >搜索</el-button
                  >
                </template>
              </el-input>
              <div
                style="
                  position: absolute;
                  top: 8px;
                  left: 210px;
                  z-index: inherit;
                  display: flex;
                  align-items: center;
                  font-size: 14px;
                "
                v-if="isSeachData"
              >
                <div>
                  <span style="color: #165dff">1</span>
                  <span style="margin: 0 1px">/</span>
                  <span>{{ seachNuber }}</span>
                </div>
                <span style="margin: 0 16px; color:">|</span>
                <div style="display: flex; align-items: center">
                  <el-icon :size="20" color="#165dff">
                    <ArrowUp />
                  </el-icon>
                  <el-icon :size="20" color="#165dff">
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>
            </div>
            <div
              v-show="isShowSearchPop && searchList.length > 0"
              class="search-popover"
            >
              <div
                class="curr"
                v-for="(item, index) in searchList"
                :key="index"
                @mousedown.native="onClickSearchItem(item, index)"
              >
                <div style="padding: 10px 0">{{ item.collegeName }}</div>
                <div
                  v-if="index + 1 < searchList.length"
                  style="width: 100%; height: 1px; background-color: #eee"
                ></div>
              </div>
            </div>
          </div>

          <div>
            <div id="tiqianpiMenu">
              <el-tree
                style="max-width: 302px; max-height: 350px; overflow-y: auto"
                highlight-current
                empty-text="暂无数据"
                :data="treeData"
                :props="defaultProps"
                accordion
                ref="deptRef"
                node-key="rowIndex"
                @node-click="handleNodeClick"
                :current-node-key="currentNodeKey"
              >
                <template #default="{ node }">
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    :content="node.data.name"
                    placement="right"
                  >
                    <span class="custom-tree-node">
                      {{ node.data.name }}
                    </span>
                  </el-tooltip>
                </template>
              </el-tree>
            </div>

            <!-- 加padding是为了解决，在小屏电脑上，触发不了下滑触底事件 -->
            <tiqianpilist
              style="padding-bottom: 80px; margin-bottom: 80px"
              :tiqianpiListData="tqPlanListData"
              v-infinite-scroll="load"
              infinite-scroll-distance="200"
              infinite-scroll-immediate="false"
              @updateScroll="updateScroll"
              @handleCollegeDetails="handleCollegeDetails"
              @setCurrentNodeKey="setCurrentNodeKey"
              ref="tiqianpilistRef"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { reactive, ref, onUnmounted, nextTick, onMounted } from 'vue';
import {
  getPreBatchLevel,
  getPreBatchPlan,
  getSchoolPlanFilter,
  getPreSchoolPlan,
  preBatchPlanSearchSchool,
} from '@/api/appv2/appv2';
import tiqianpilist from './tiQianPiList';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import _ from 'lodash';
import bus from '@/utils/bus';
const emits = defineEmits(['handleCollegeDetails']);
const planFilter = ref([]); // 筛选数据
const provinceArr = ref([]); // 省标题筛选数组
const planTitleWidth = ref('');
// 普通批
const planYearArr = ref([]); // 年标题筛选数组
const courseArr = ref([]); // 科类筛选数组
const batchArr = ref([]); // 批次筛选数组
const planYearData = ref([]); // 年份数据
const loading = ref(false);
const tableData = ref([]);

const deptRef = ref(null);

const contentRef = ref(null);
const contentWidth = ref(0);
const seachNuber = ref(0);
const isSeachData = ref(false);
// 普通批请求参数
const planReqData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  name: '',
  pid: '',
  year: '',
  course: '',
  batch: '',
  keywords: '',
  keywordsMajor: '',
});

// 提前批
const tqPlanYearData = ref([]); // 年份数据
const tqPlanYearArr = ref([]); // 年标题筛选数组
// 提前批请求参数
const tqPlanReqData = reactive({
  name: '',
  provinceCode: '',
  year: '',
  rowIndex: 0,
  v: 2,
});

const tqPlanKeywords = ref('');
const isShowSearchPop = ref(false); // 是否显示搜索pop
const searchList = ref([]); // 模糊搜索数据源

const activeName = ref('first');

const treeData = ref([]);
const defaultProps = {
  children: 'levels',
  label: 'name',
};
const scrollType = ref(0);

const tqPlanListData = ref([]);
const tiqianpilistRef = ref(null);
const scrollFun = ref(null);

const showMajorsID = ref('');

onMounted(() => {
  setTimeout(() => {
    handleResize();
  }, 400);
});

const handleResize = () => {
  if (contentRef.value) {
    contentWidth.value = contentRef.value.offsetWidth + 'px';
  }

  // 获取当前窗口宽度
  let width = window.innerWidth;
  // 根据不同的宽度范围设置 drawerSize 的值
  if (width > 2000) {
    planTitleWidth.value = '60%';
  } else if (width > 1800) {
    planTitleWidth.value = '67.5%';
  } else if (width > 1600) {
    planTitleWidth.value = '77.7%';
  } else if (width > 1400) {
    planTitleWidth.value = '86.5%';
  } else {
    planTitleWidth.value = '96%';
  }
};

// 移除之前可能存在的同名监听器
window.removeEventListener('resize', handleResize);
// 添加 resize 事件监听器
window.addEventListener('resize', handleResize);
// 初始调用一次
handleResize();

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
const currentNodeKey = ref('');
const handleScroll = (e) => {
  if (activeName.value == 'second') {
    tiqianpilistRef.value.handleIsShow(e.scrollTop);
  }
};

// 设置当前节点
const setCurrentNodeKey = (val) => {
  // 按 > 符号分割字符串，获取最后一项（目标节点名称）
  const targetName = val.split('>').pop().trim();

  // 查找匹配的节点
  const findRowIndex = (data, target) => {
    for (let node of data) {
      // 如果当前节点名称匹配目标名称，返回其 rowIndex
      if (node.name === target) {
        return node.rowIndex;
      }
      if (node.levels) {
        // 递归查找子节点
        const result = findRowIndex(node.levels, target);
        if (result) return result;
      }
    }
    return null;
  };

  // 查找匹配的节点
  const rowIndex = findRowIndex(treeData.value, targetName);
  if (rowIndex !== null) {
    // 设置当前节点
    currentNodeKey.value = rowIndex;
    deptRef.value.setCheckedKeys([rowIndex]); // 使用 rowIndex 设置选中节点
  } else {
    console.warn('未找到匹配的节点:', targetName);
  }
};

// 切换提前批树选项
const handleNodeClick = (data, node) => {
  scrollType.value = 1;
  tqPlanReqData.rowIndex = data.rowIndex;
  tqPlanReqData.search = '';
  tqPlanListData.value = [];
  tiqianpilistRef.value.handleSetDomTitle(data.name, node.parent.data.name);
  fetchPreBatchPlan();
};

// 搜索提前批
const getPreBatchPlanSearchSchool = _.throttle((val) => {
  if (val == '') {
    searchList.value = [];

    if (tqPlanReqData.search != '') {
      // 清空
      tqPlanReqData.rowIndex = 0;
      tqPlanReqData.search = '';
      tqPlanListData.value = [];
      fetchPreBatchPlan();
    }
    isSeachData.value = false;
    return;
  }

  preBatchPlanSearchSchool({
    search: tqPlanKeywords.value,
    year: tqPlanReqData.year,
    provinceCode: tqPlanReqData.provinceCode,
  }).then((res) => {
    if (res.data?.length >= 1) {
      isSeachData.value = true;
    }
    searchList.value = res.data;
    isShowSearchPop.value = true;
  });
}, 800);

// 点击提前批搜索项
function onClickSearchItem(item) {
  isShowSearchPop.value = false;
  tqPlanReqData.rowIndex = item.rowIndex;
  tqPlanReqData.search = item.searchCollegeName;
  tqPlanListData.value = [];
  fetchPreBatchPlan();
}

// 获取提前批数据
const fetchPreBatchPlan = () => {
  // loading.value = true;
  tiqianpilistRef.value.handleIsLoading(true);

  getPreBatchPlan(tqPlanReqData)
    .then((res) => {
      seachNuber.value = res.data?.length;
      if (tqPlanListData.value.length == 0) {
        tiqianpilistRef.value.handleIsShow(0);
      }
      tqPlanListData.value = [...tqPlanListData.value, ...res.data];
      tqPlanReqData.rowIndex += res.data.length;
      tiqianpilistRef.value.handleCilckTree(scrollType.value);
      scrollType.value = 0;
      // loading.value = false;
      delete tqPlanReqData.search;
      tiqianpilistRef.value.handleIsLoading(false);
    })
    .catch(() => {
      tiqianpilistRef.value.handleIsLoading(false);

      // loading.value = false;
    });
};

const updateScroll = (scroll, type) => {
  if (type == 1) {
    nextTick(() => {
      scrollFun.value.scrollTo({
        top: scroll - 160,
        behavior: 'smooth',
      });
    });
  } else {
    return;
  }
};

const load = () => {
  if (activeName.value == 'second') {
    fetchPreBatchPlan();
  }
};

// 切换省份
function provinceChange(type) {
  let index;
  if (type == 1) {
    localStorage.setItem(
      'provinceId',
      planFilter.value.filter((v) => v.provinceName == planReqData.name)[0]
        .provinceCode
    );

    index = planFilter.value.findIndex(
      (item) => item.provinceName == planReqData.name
    );
  } else {
    localStorage.setItem(
      'provinceId',
      planFilter.value.filter((v) => v.provinceName == tqPlanReqData.name)[0]
        .provinceCode
    );

    index = planFilter.value.findIndex(
      (item) => item.provinceName == tqPlanReqData.name
    );
  }
  if (index >= 0) {
    planYearData.value = planFilter.value[index].years;

    planYearArr.value = [];
    planYearData.value.forEach((item) => {
      planYearArr.value.push(item.year);
    });
    courseArr.value = planYearData.value[0].course;
    batchArr.value = planYearData.value[0].batch;

    planReqData.pid = planFilter.value[index].provinceCode || '11';
    planReqData.name = provinceArr.value[index] || '';
    planReqData.year = planYearArr.value[0] || '';
    planReqData.course = courseArr.value[0] || '';
    planReqData.batch = batchArr.value[0] || '';
  }

  fetchSchoolPlan();

  if (index >= 0) {
    tqPlanYearData.value = planFilter.value[index].years;

    tqPlanYearArr.value = [];
    tqPlanYearData.value.forEach((item) => {
      tqPlanYearArr.value.push(item.year);
    });

    tqPlanReqData.name = provinceArr.value[index] || '';
    tqPlanReqData.provinceCode = planFilter.value[index].provinceCode || '11';
    tqPlanReqData.year = tqPlanYearArr.value[0] || '';
    tqPlanReqData.rowIndex = 0;
  }

  tqPlanListData.value = [];
  fetchPreBatchPlan();
  fetchPreBatchLevel();
}

// 切换年
const yearChange = (val) => {
  if (activeName.value == 'first') {
    let resFilter = planYearData.value.filter((v) => v.year == val);
    courseArr.value = resFilter[0].course;
    planReqData.course = courseArr.value[0];
    batchArr.value = resFilter[0].batch;
    planReqData.batch = batchArr.value[0];
    fetchSchoolPlan();
  } else {
    tqPlanReqData.rowIndex = 0;
    tqPlanListData.value = [];
    fetchPreBatchPlan();
    fetchPreBatchLevel();
  }
};

// 切换普通批/提前批
const handleClick = () => {
  if (activeName.value == 'first' && planYearData.value.length > 0) {
    if (tableData.value.length == 0) {
      fetchSchoolPlan();
    }
  } else if (tqPlanYearData.value.length > 0) {
    if (treeData.value.length == 0) {
      fetchPreBatchPlan();
      fetchPreBatchLevel();
    }
  }
};

// 获取提前批目录
const fetchPreBatchLevel = () => {
  let data = {
    year: tqPlanReqData.year,
    provinceCode: tqPlanReqData.provinceCode,
  };
  getPreBatchLevel(data).then((res) => {
    treeData.value = res.data;
  });
};

// 获取普通批数据
const fetchSchoolPlan = () => {
  showMajorsID.value = '';

  loading.value = true;
  getPreSchoolPlan(planReqData)
    .then((res) => {
      tableData.value = res.data.data;
      planReqData.total = res.data.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

// 获取分数线筛选条件
const fetchSchoolPlanFilter = () => {
  getSchoolPlanFilter().then((res) => {
    planFilter.value = res.data;

    planYearArr.value = [];
    courseArr.value = [];
    batchArr.value = [];
    provinceArr.value = [];

    if (planFilter.value.length > 0) {
      if (
        localStorage.getItem('provinceId') &&
        planFilter.value.some(
          (v) => v.provinceCode == Number(localStorage.getItem('provinceId'))
        )
      ) {
        planYearData.value = planFilter.value.filter(
          (v) => v.provinceCode == localStorage.getItem('provinceId')
        )[0].years;
      } else {
        planYearData.value = planFilter.value[0].years;
      }

      planYearData.value.forEach((item) => {
        planYearArr.value.push(item.year);
      });
      courseArr.value = planYearData.value[0].course;
      batchArr.value = planYearData.value[0].batch;
      planFilter.value.forEach((item) => {
        provinceArr.value.push(item.provinceName);
      });
      if (
        localStorage.getItem('provinceId') &&
        planFilter.value.some(
          (v) => v.provinceCode == Number(localStorage.getItem('provinceId'))
        )
      ) {
        planReqData.pid = localStorage.getItem('provinceId');
        planReqData.name = planFilter.value.filter(
          (v) => v.provinceCode == localStorage.getItem('provinceId')
        )[0].provinceName;
      } else {
        planReqData.pid = planFilter.value[0].provinceCode || '11';
        planReqData.name = provinceArr.value[0] || '';
      }
      planReqData.year = planYearArr.value[0] || '';
      planReqData.course = courseArr.value[0] || '';
      planReqData.batch = batchArr.value[0] || '';

      tqPlanYearData.value = planYearData.value;
      tqPlanYearArr.value = planYearArr.value;
      tqPlanReqData.name = planReqData.name;
      tqPlanReqData.provinceCode = planReqData.pid;
      tqPlanReqData.year = planReqData.year;

      if (activeName.value == 'first') {
        fetchSchoolPlan();
      } else {
        fetchPreBatchPlan();
        fetchPreBatchLevel();
      }
    }
  });
};
fetchSchoolPlanFilter();

function onClickCollegeDetails(college) {
  let myData = {
    isShow: true,
    type: '3',
    data: {
      collegeCode: college.collegeCode,
    },
  };
  bus.emit('handleCollegeDetails', myData);
}

const handleCollegeDetails = (myData) => {
  emits('handleCollegeDetails', myData);
};

function setActiveName(val) {
  activeName.value = val || 'first';
  handleClick();
}

defineExpose({
  setActiveName,
});
</script>

<style lang="scss" scoped>
:deep(.el-scrollbar__bar) {
  display: none;
}

:deep(.search-popover) {
  // z-index: 99999 !important;
  left: 220px !important;
}

:deep(.el-tabs__header) {
  padding: 10px 0 0;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: white;
}
.iconBox {
  cursor: pointer;
  position: absolute;
  right: 100px;
  top: 50%;
  color: #4e5969;
  transform: translateY(-50%);
}
.num {
  color: var(--primary-color);
}
.icon {
  width: 1em;
  height: 1em;
  margin-left: 5px;
  position: relative;
  top: 2px;
  color: var(--primary-color);
}
// :deep(.el-tree-node) {
// 	white-space: wrap;
// 	outline: 0;
// }

.custom-tree-node {
  width: 100%;
  overflow: hidden !important; // 溢出部分隐藏
  white-space: nowrap !important; //禁止自动换行
  text-overflow: ellipsis !important; // 使溢出部分以省略号显示
  display: block !important;
  font-size: 16px;
}

#tiqianpiMenu {
  width: 302px;
  // height: 400px;
  position: fixed;
  top: 200px;
  z-index: 999;
  // left: calc(50vw - 590px);
  border: 1px solid #ebeef5;
}

.select-box {
  position: fixed;
  top: 150px;
  display: flex;
  align-items: center;
}

.plan-title {
  // width: 100%;
  // margin-top: 60px;
  z-index: 9999;
  margin-top: 120px;
  font-size: 14px;
  color: #333;
  background-color: #f7f7f8;
  font-weight: 500;
  padding: 20px 0;
  position: fixed;
  top: 80px;
  // left: 50%;
  // transform: translateX(-50%);
}

.plan-list {
  font-size: 14px;
  color: #666;
  padding: 12px 0;
  border-bottom: 1px #eee solid;
}

.plan-major-title {
  font-size: 14px;
  color: #333;
  padding: 15px 0;
  background-color: #f7f7f8;
}

.plan-major-list {
  font-size: 13.5px;
  color: #666;
  padding: 12px 0;
  border-bottom: 1px #eee solid;
  background-color: rgba(0, 0, 0, 0.03);
}

.nodata {
  margin-top: 100px;
  text-align: center;
  width: 100%;
  font-size: 14px;
  color: #666666;
}

.search-popover {
  position: absolute;
  top: 40px;
  left: 210px;
  width: 290px;
  height: 200px;
  overflow: auto;
  background-color: white;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
  font-size: 14px;
  color: #666;
}
</style>

<style>
.tiqianpiSelect .el-select--large .el-select__wrapper {
  border-radius: 0px;
  box-shadow: none;
  border-bottom: 1px solid #ebeef5;
}

/* /设置选择框的鼠标经过样式 */
.tiqianpiSelect .el-select .el-select__wrapper:hover {
  box-shadow: none !important;
}

/* 更改placeholder的颜色 */
.tiqianpiSelect .el-select .el-select__placeholder {
  color: black;
  font-weight: bold;
  font-size: 16px;
}

.el-drawer__body {
  padding-top: 0;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 60px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
